/*
    Unminified development version of the datepicker stylesheet. Please use the
    minified version in production (remember to run a find/replace on the 
    file to update the image locations to suit your installation).
*/

/* 
    Hide the datepickers associated input by using a className 
*/
.fd-hidden-input
    {
    display:none;
    }
/* 
    Screen reader class - used to hide spans inside each cell from the visual 
    display. See: http://webaim.org/techniques/css/invisiblecontent/ 
*/
.fd-screen-reader
    {
    position:absolute;
    left:-999em;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden; 
    -moz-outline: 0 none;
         outline: 0 none;
    } 
/* 
    The wrapper div 
*/
.date-picker
    {
    position:absolute;        
    z-index:9999;
    text-align:center;
    /* 
    Change the font-size to suit your needs. The following line is for the demo
    that has a 14px font-size defined on the body tag.
     
    All other rules are "em" based and inherit from the font-size set here. 
    */
    font:900 0.8em/1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
    background:transparent;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;                        
            user-select:none;
    }
/* 
    Styles for the static datePickers 
*/
.static-datepicker
    {
    position:relative;        
    top:5px;
    left:0;
    margin-bottom:1.5em;
    }
/* 
    The iframe hack to cover selectlists in IE6 
*/
.iehack
    {
    position:absolute;
    background:#fff;
    z-index:9998;
    padding:0;
    margin:0;
    border:0;
    display:none;
    }
/* 
    The activation "button" created beside each input for popup datePickers 
*/
.date-picker-control span
    {
    display:block;
    width:18px;
    height:18px;
    overflow:hidden;
    margin:auto 0;
    resize:none;
    outline:none;
    }
/*
    The hover effect on the activation button
*/
.date-picker-button-active span,
.date-picker-control:focus span,
.date-picker-control:hover span,
.date-picker-control:active span
    {
    outline:none;
    -webkit-box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
       -moz-box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
            box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
    -webkit-border-radius:2px;
       -moz-border-radius:2px;
            border-radius:2px;
    }
/* 
    A base64 encoded image-sprite is used for the activation button. IE6 and 7
    get fed "normal" png images within the rule that follows.
*/
.date-picker-control:link,
.date-picker-control:visited
    {
    position:relative;
    display: -moz-inline-stack;
    border:0 none;
    padding:0;
    margin:0 4px;
    background-color:transparent;
    background-image:url();
    background-repeat:no-repeat;
    background-position:0 -72px;
    min-width:18px;
    line-height:1;
    cursor:pointer;
    visibility:visible;
    text-decoration:none;
    vertical-align:text-bottom;
    resize:none;         
    }
/* 
    IE6 & 7 fed "normal" png images 
*/
.oldie .date-picker-control:link,
.oldie .date-picker-control:visited
    {
    /* 
    IE7 gets a non-base64 encoded image sprite of the base64 encoded image 
    declared above. That's all you have to do for IE7 support as it inherits
    the background-position declarations used to reposition the sprite
    */
    *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-sprite.png);
    /* 
    IE6 gets the filter treatment and an individual image for each animation 
    state. This pattern is repeated for all other image-based rules within the
    stylesheet
    */
    _background-image:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-normal.png');        
    } 
/* 
    If the datepicker has a valid date then use a different icon for the
    activation button to let the user know. It's a little detail but it's the
    little things in life etc
*/
.date-picker-dateval:link,
.date-picker-dateval:visited
    {
    background-position:0 -108px;
    } 
/* 
    Again, IE6 gets a "normal" png image from the server. Rinse, repeat.
*/
.oldie .date-picker-dateval:link,
.oldie .date-picker-dateval:visited
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-selected.png');        
    }                           
/* 
    Hover states etc for the activation button 
*/
.date-picker-button-active:link,
.date-picker-button-active:visited,
.date-picker-control:focus,
.date-picker-control:hover,
.date-picker-control:active
    {
    background-position:0 0;
    }
/* 
    IE 6 activation button hover states 
*/
.oldie .date-picker-button-active:link,
.oldie .date-picker-button-active:visited,
.oldie .date-picker-control:focus,
.oldie .date-picker-control:hover,
.oldie .date-picker-control:active
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-focused.png');             
    }
/* 
    Disabled activation button 
*/
.date-picker-control-disabled:link,
.date-picker-control-disabled:visited,
.date-picker-control-disabled:hover,
.date-picker-control-disabled:active
    {
    background-position:0 -36px;
    cursor:default;
    }
/* 
    IE 6 disabled activation button 
*/
.oldie .date-picker-control-disabled:link,
.oldie .date-picker-control-disabled:visited,
.oldie .date-picker-control-disabled:hover,
.oldie .date-picker-control-disabled:active
    {
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.frequency-decoder.com/demo/datePicker/media/datepicker-disabled.png');                       
    }
.date-picker-control-disabled:hover span,
.date-picker-control-disabled:active span
    {
    -webkit-box-shadow:none !important;
       -moz-box-shadow:none !important;
            box-shadow:none !important;
    }
/*  
    Feed IE6 the following rule, IE7 should handle the min-width declared
    previously. 
 */
.oldie .date-picker-control
    {
    _width:18px;
    }
/* 
    IE, older Safari & Opera. Seperate CSS rule seems to be required. 
*/
.date-picker-control
    {
    display:inline-block;
    }
/* 
    Default datepicker "button" styles 
*/
.date-picker th span
    {
    display:block;
    padding:0;
    margin:0;
    text-align:center;
    line-height:1em;
    border:0 none;
    background:transparent;
    font-weight:bold;
    cursor:pointer;
    }
/* 
    The "month, year" display 
*/
.date-picker .month-display,
.date-picker .year-display
    {
    display:inline;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:normal;
    font-size:1.2em;
    }
/* 
    Generic button class for Next & Previous (both month & year) buttons 
*/
.date-picker .prev-but,
.date-picker .next-but
    {
    font-weight:normal;
    font-size:2.4em;
    font-family: georgia, times new roman, palatino, times, bookman, serif;
    cursor:pointer;
    }
.date-picker .prev-but,
.date-picker .next-but,
.date-picker .today-but
    {         
    -webkit-transition:all .2s ease-in-out;
       -moz-transition:all .2s ease-in-out;
        -ms-transition:all .2s ease-in-out;
         -o-transition:all .2s ease-in-out;
            transition:all .2s ease-in-out;        
    }
/* 
    Hover effect for Next & Previous (month, year) buttons 
*/
.date-picker .prev-but:hover,
.date-picker .next-but:hover,
.date-picker .today-but:hover
    {
    color:#a84444;
    }
.date-picker .prev-but:hover,
.date-picker .next-but:hover
    {
    /*        
    Uncomment this if you want a scale effect...
    
    -webkit-transform:scale(1.6);
       -moz-transform:scale(1.6);
        -ms-transform:scale(1.6);
         -o-transform:scale(1.6);
            transform:scale(1.6);
    
    text-shadow:0 2px 1px rgba(0,0,0,.4);
    */
    }
/* 
    Today button 
*/
.date-picker .today-but
    {
    text-align:center;
    margin:0 auto;
    font-weight:normal;
    font-size:1em;
    width:100%;
    text-decoration:none;
    padding-top:0.3em;
    text-transform:uppercase;
    vertical-align:middle;
    cursor:pointer          
    }
/* 
    Disabled buttons 
*/ 
.date-picker-disabled .prev-but,
.date-picker-disabled .next-but,
.date-picker-disabled .today-but,
.date-picker-disabled .prev-but:hover,
.date-picker-disabled .next-but:hover,
.date-picker-disabled .today-but:hover,
.date-picker .prev-but.fd-disabled:hover,
.date-picker .next-but.fd-disabled:hover,
.date-picker .fd-disabled,
.date-picker .fd-disabled:hover
    {
    color:#aaa;
    cursor:default !important; 
    opacity:1;        
    }   
.date-picker .prev-but.fd-disabled:hover,
.date-picker .next-but.fd-disabled:hover
    {
    /*   
    Uncomment this if you have uncommented the "scale" rules above
    
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
            transform:scale(1);
    */
    text-shadow:0 -1px 1px rgba(255,255,255,.8);
    }
/* 
    The gradient background image 
*/
.date-picker table,
.date-picker td,
.date-picker tbody th,
.date-picker .day-disabled,
.date-picker .date-picker-hover.day-disabled,
.date-picker .date-picker-unused,
.date-picker .month-out 
    {
    background-color:#fff;
    background-image:url();
    background-repeat:repeat-x;
    background-position:0 0;
    }
.oldie .date-picker table,
.oldie .date-picker td,
.oldie .date-picker tbody th,
.oldie .date-picker .day-disabled,
.oldie .date-picker .date-picker-hover.day-disabled,
.oldie .date-picker .date-picker-unused,
.oldie .date-picker .month-out 
    {
    *background-image:url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-gradient.gif);
    /* 
    Remove from IE6 as it has a bug that never caches images on dynamically 
    created elements which results in one http request being made for each
    cell of each table rendered by the script. 
    */
    _background-image:none;
    }
.date-picker table
    {
    table-layout:auto;
    empty-cells:show;
    border-spacing:2px;
    border-collapse:separate;
    position:relative;               
    margin:0;
    padding:0;
    border:1px solid #ccc;        
    background-position:0 -20px; 
    text-align:center;
    padding:0.3em; 
    z-index:2;
    width:auto;
    height:auto;
    color:#555;         
    font-size:1em;
    -webkit-border-radius:0.8em;
       -moz-border-radius:0.8em;
            border-radius:0.8em;             
    -webkit-box-shadow:0px 0px 5px #aaa; 
       -moz-box-shadow:0px 0px 5px #aaa; 
            box-shadow:0px 0px 5px #aaa;               
    }
/* 
    Common TD & TH styling 
*/
.date-picker td,
.date-picker tbody th
    {                 
    border:0 none;
    padding:0;
    text-align:center;
    vertical-align:middle;               
    cursor:pointer;
    background-position:0 -35px; 
    width:3em;
    height:3em;   
    overflow:hidden;      
    outline:transparent none 0px;        
    border:1px solid #ccc;
    text-transform:none;
    font-weight:normal;
    text-shadow:0 1px #fff;
    -webkit-border-radius:2px;        
       -moz-border-radius:2px;         
            border-radius:2px;
    }
.date-picker th
    {
    border:0 none;
    padding:0;        
    font-weight:bold;
    color:#333;
    text-align:center;
    vertical-align:middle; 
    text-transform:none;
    }
.date-picker .date-picker-week-header
    {                          
    border:1px solid #dcdcdc;        
    font-style:oblique;  
    background:transparent;
    cursor:default;         
    }
.date-picker .date-picker-thead .date-picker-week-header
    {                          
    border:0 none;
    cursor:help;         
    }
/* 
    The "mon tue wed etc" day header styles 
*/
.date-picker .date-picker-day-header
    {
    cursor:help;
    border:0 none;
    padding:0 0 0.2em 0;
    text-transform:lowercase;
    height:auto;
    }
/* 
    tfoot status bar 
*/
.date-picker .date-picker-statusbar
    {
    cursor:default;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:0.1em;
    border:0 none;
    background:#fff;
    height:2.8em;
    }
/* 
    TD cell that is _not_ used to display a day of the month 
*/
.date-picker .date-picker-unused
    {
    border-color:#dcdcdc;          
    cursor:default !important;
    background-position:0 -25px;
    }
/* 
    The TH cell used to display the "month, year" title 
*/
.date-picker .date-picker-title
    {
    width:auto;
    height:auto;
    padding:0.4em 0;
    }
/* 
    The "todays date" cell style 
*/
.date-picker .date-picker-today
    {
    background:#fff url() no-repeat 0 0;
    }
.oldie .date-picker .date-picker-today
    {
    *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-today.gif) no-repeat 0 0;
    }
.date-picker .month-out.date-picker-highlight 
    {
    color:#b87676;
    }
/* 
    The "highlight days" style 
*/
.date-picker .date-picker-highlight
    {
    color:#a86666;
    }
/* 
    The "active cursor" style 
*/
.date-picker td
    {
    /*
    
    Uncomment this if you want a transition on the cursor cells scale effect
    
    -webkit-transition: all .2s ease;    
       -moz-transition: all .2s ease;    
        -ms-transition: all .2s ease;    
         -o-transition: all .2s ease;    
            transition: all .2s ease;    
    */
    }
/*
    Keyboard users get a scaled cursor. webKit exhibits buggy behaviour when 
    scaling TD cells so commented out until I find a curious CSS based fix.     
*/
.date-picker-focus .date-picker-hover
    {
    /*    
    -webkit-transform:scale(1.25);
    */
       -moz-transform:scale(1.25);
        -ms-transform:scale(1.25);
         -o-transform:scale(1.25);
            transform:scale(1.25);
    }

.date-picker .date-picker-hover,
.date-picker .month-out.date-picker-hover
    {
    background:#fff url() no-repeat 0 0;
    cursor:pointer;
    border-color:rgb(100,130,170) !important;
    border-color:rgba(100,130,170,.7) !important;
    color:rgb(100,130,170); 
    text-shadow: 0px 1px 1px #fff;        
    -webkit-box-shadow:0 0 6px rgba(100,130,170,.6); 
       -moz-box-shadow:0 0 6px rgba(100,130,170,.6); 
            box-shadow:0 0 6px rgba(100,130,170,.6); 
    }
.oldie .date-picker .date-picker-hover,
.oldie .date-picker .month-out.date-picker-hover
    {
    *background:#fff url(http://www.frequency-decoder.com/demo/datePicker/media/datepicker-cursor.jpg) no-repeat 0 0;
    }
/* 
    The "disabled days" style 
*/
.date-picker .day-disabled
    {          
    color:#888;
    cursor:default;
    text-decoration:line-through;
    background-position:0 -15px;
    } 
.date-picker .month-out 
    {
    border-color:#ddd;
    border-color:rgba(220,220,220,0.8);
    color:#aaa;
    background-position:0 -25px;
    } 
/* 
    The "selected date" style - color changed below also 
*/
.date-picker .date-picker-selected-date
    {
    border-color:#888 !important;
    border-color:rgba(7,7,7,.6) !important;
    }
/* 
    The date "out of range" style 
*/
.date-picker .out-of-range,
.date-picker .not-selectable
    {           
    color:#ccc;
    font-style:oblique;
    background:#fcfcfc;
    cursor:default;              
    } 
/* 
    Week number "out of range" && "month-out" styles 
*/
.date-picker th.month-out,
.date-picker th.out-of-range
    {
    color:#aaa;
    font-style:oblique;
    background:#fcfcfc;          
    }
/* 
    Week numbers "out of range" 
*/
.date-picker .out-of-range
    {
    opacity:0.6;
    }  
/* 
    Used when the entire grid is full but the next/prev months dates cannot be 
    selected 
*/
.date-picker .not-selectable
    {         
    opacity:0.8;
    }
.oldie .date-picker .out-of-range
    {
    filter:alpha(opacity=60);
    }
.oldie .date-picker .not-selectable
    {
    filter:alpha(opacity=80);
    }
.date-picker tr
    {
    display:table-row;
    }
.date-picker sup
    {
    font-size:0.86em;
    letter-spacing:normal;
    text-transform:none;
    height: 0;
	line-height: 1;
	position: relative;
	top:-0.2em;	
	vertical-align: baseline !important;
	vertical-align: top;  
    }
.date-picker .date-picker-day-header,
.date-picker .month-display,
.date-picker .year-display
    {            
    text-shadow: 0px 1px 1px #fff;
    }
.date-picker .month-display,
.date-picker .year-display
    {            
    cursor:default;                            
    }
.date-picker td:focus,
.date-picker .date-picker-hover 
    {
    overflow:hidden;
	-moz-outline:0 none;
         outline:0 none;        
	-o-highlight:0 none;
    }
/* 
    The "pulse" animation on focused button and datepicker cursor
*/
.date-picker-focus .date-picker-hover,
.date-picker-control:focus span
    {
    -webkit-animation:fd-dp-pulse 2s infinite;
       -moz-animation:fd-dp-pulse 2s infinite;
        -ms-animation:fd-dp-pulse 2s infinite;
         -o-animation:fd-dp-pulse 2s infinite;
    }
/* 
    The "selected date" style 
*/
.date-picker .date-picker-selected-date
    {
    color:#333;
    color:rgba(3,3,3,.8);
    }
/*
    Remove the box-shadow for the inline datepickers
*/
.static-datepicker table
    {
    -webkit-box-shadow:0 0 0 transparent;
       -moz-box-shadow:0 0 0 transparent;   
            box-shadow:0 0 0 transparent;           
    }               
.date-picker-focus table
    {
    border-color:#999;
    border-color:rgba(153,153,153,.8);
    -webkit-box-shadow:0px 0px 5px #aaa;
       -moz-box-shadow:0px 0px 5px #aaa;
            box-shadow:0px 0px 5px #aaa; 
    }
/* 
    Draggable datepickers 
*/
.date-picker .drag-enabled,
.date-picker .drag-enabled span
    {
    cursor:move;
    }    
/* 
    Disabled datePicker 
*/
.date-picker-disabled table
    {
    opacity:.8 !important;
    }
.oldie .date-picker-disabled table
    {
    filter:alpha(opacity=80);                  
    }
.date-picker-disabled,
.date-picker-disabled td,
.date-picker-disabled th,
.date-picker-disabled th span
    {
    cursor:default !important;          
    }
.date-picker-disabled .prev-but:hover,
.date-picker-disabled .next-but:hover
    {
    /*    
    Uncomment this if you have used the previous scale rules previously
    declared within the file (for the prev-but and next-but classes)
    
    -webkit-transform:scale(1);
       -moz-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
            transform:scale(1);
    */
    text-shadow:none;
    }
body.fd-drag-active 
    {
    -webkit-touch-callout:none; 
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;     
    }
/* 
    Glow effect for the focused (keyboard active) cursor cell and popup
    datepickers activation button 
*/
@-webkit-keyframes fd-dp-pulse {
0%      {
        box-shadow:0 0 4px rgba(100, 130, 170, 0.5);
        }
20%     {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
40%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
60%     {
        box-shadow:0 0 6px rgba(10, 130, 170, 0.8);
        }
80%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
100%    {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
}
@-moz-keyframes fd-dp-pulse {
0%      {
        box-shadow:0 0 4px rgba(100, 130, 170, 0.5);
        }
20%     {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
40%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
60%     {
        box-shadow:0 0 6px rgba(10, 130, 170, 0.8);
        }
80%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
100%    {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
}
@-ms-keyframes fd-dp-pulse {
0%      {
        box-shadow:0 0 4px rgba(100, 130, 170, 0.5);
        }
20%     {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
40%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
60%     {
        box-shadow:0 0 6px rgba(10, 130, 170, 0.8);
        }
80%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.7);
        }
100%    {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
}
@-o-keyframes fd-dp-pulse {
0%      {
        box-shadow:0 0 3px rgba(100, 130, 170, 0.55);
        }
20%     {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
40%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
        }
60%     {
        box-shadow:0 0 6px rgba(10, 130, 170, 0.7);
        }
80%     {
        box-shadow:0 0 5px rgba(40, 130, 170, 0.65);
        }
100%    {
        box-shadow:0 0 4px rgba(70, 130, 170, 0.6);
        }
}

